import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "@/actions";
import "./index.css";

const mapStateToProps = state => ({
    userinfo: state.user,
    common: state.common
});

const mapDispatchToProps = dispatch => 
    bindActionCreators({
        reqLogin: actions.reqLogin,
        changeCount: actions.changeCount
    },
    dispatch
);

class Home extends Component {

    state = {
        userinfo: null, //用户信息
        errMsg: "", //错误信息
    }

    static getDerivedStateFromProps(nextProps, prevState){
        // console.log(nextProps.userinfo)
        let { userinfo, errMsg } = nextProps.userinfo
        if(!prevState.userinfo && nextProps.userinfo){
            return {
                userinfo: userinfo?userinfo:null,
                errMsg: errMsg
            }
        }
        return null
    }

    componentDidMount() {
        let params = {
            username: 'zhangsan',
            password: '123456'
        }
        this.props.reqLogin(params);
    }

    componentDidUpdate(prevProps, prevState){
        // console.log(prevProps,prevState)
    }

    change = () => {
        let num = this.props.common.count;
        this.props.changeCount(++num)
    }

    render(){
        const { userinfo, errMsg } = this.state;
        const { count } = this.props.common;
        return (
            <Fragment>
                {/* 同步方式 */}
                <button onClick={this.change}>点击改变数字</button>
                <h2>{count}</h2>
                {/* 异步方式 */}
                { errMsg && <p style={{ color: 'red' }}>{errMsg}</p> }
                { userinfo && <h1>用户信息：{`${userinfo.name}-${userinfo.age}-${userinfo.addr}`}</h1> }
            </Fragment>
        )
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Home);